<!-- THE CLOCK -->
<my-clock>
  <template shadowrootmode=open>
    <h3>
      Clock styles here
    </h3>
    <div>
      <span id=hour>12</span> : <span id=min>34</span> : <span id=sec>56</span>
    </div>
  </template>
</my-clock>
<script>
  customElements.define('my-clock', class extends HTMLElement {
    #internals = null;
    constructor() {
      super();
      this.#internals = this.attachInternals();
      if (!this.#internals.shadowRoot) {
        // If we don't have SSR content, build the shadow root
        this.attachShadow({ mode: 'open' }).innerHTML = `
          <style>
            :host {
              font-weight: bold;
            }
            :host(h3) {
              color: red;
            }
          </style>
          This is the SSR content
          <h3> Clock styles here </h3>
          <div>
            <span id=hour></span> : <span id=min></span> : <span id=sec></span>
          </div>
        `;
      }
      const shadow = this.#internals.shadowRoot;
      this.hours = shadow.querySelector('#hour');
      this.minutes = shadow.querySelector('#min');
      this.seconds = shadow.querySelector('#sec');
    }

    connectedCallback() {
      this.update();
      this.interval = setInterval(() => this.update(), 1000);
    }

    disconnectedCallback() {
      clearInterval(this.interval);
    }

    update() {
      const pad = v => { return String(v).padStart(2, '0') }
      const d = new Date();
      this.hours.textContent = pad(d.getHours());
      this.minutes.textContent = pad(d.getMinutes());
      this.seconds.textContent = pad(d.getSeconds());
    }
  });
</script>